<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>过渡动画</title>
  <style>
	.loading{
		background:#fff;
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		z-index:99999;
	}
	.loading{
		animation:opacity 3s forwards;
	}
	.loading .pic{
		width:100px;
		height:100px;
		margin:auto;
		font-size:50px;
		text-align:center;
		line-height:101px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
	}
	.loading .pic span{
		display:block;
		width:80px;
		height:80px;
		margin:0 auto;
		border-radius:50%;
		position:absolute;
		top:10px;
		left:10px;
		box-shadow:0 3px 0 #ff5700;
		animation:rotate 1s infinite linear ;
	}
	@keyframes rotate{
		0%{transform:rotate(0deg);}
		100%{transform:rotate(360deg);} 
	}
	@keyframes opacity{
		0% {opacity: 1;}
		50%{opacity: 0.5;z-index:-50}
		100%{opacity: 0;z-index:-100}
	}
  </style>
 </head>
 <body>
  	<div class="loading">
		<div class="pic">
			<span></span>
			<b>0%</b>
		</div>
    </div>
	<button onclick="alert(42)">nihao</button>
 </body>
</html>